<template>

  <el-tabs v-model="activeName">

    <el-tab-pane v-if="checkPermission(['exam:review:paper:list'])" label="阅卷管理" name="admin">
      <admin-preview @overview="toOverviewList"/>
    </el-tab-pane>

    <el-tab-pane v-if="checkPermission(['exam:review:match'])" label="待我批阅" name="require">
      <require-preview @match="toMatchList"/>
    </el-tab-pane>
    <el-tab-pane v-if="checkPermission(['exam:review:match'])" label="自由批阅" name="free">
      <free-preview @match="toMatchList" />
    </el-tab-pane>

  </el-tabs>


</template>

<script>

import RequirePreview from './components/RequirePreview.vue'
import FreePreview from './components/FreePreview.vue'
import AdminPreview from '@/views/admin/exam/review/components/AdminPreview.vue'
import permission from '@/directive/permission'
import checkPermission from '@/utils/permission'

export default {
  components: { AdminPreview, FreePreview, RequirePreview },
  directives: {
    permission
  },
  data() {
    return {
      cacheKey: 'review-tab-active',
      activeName: 'require'
    }
  },
  watch: {
    activeName: {
      handler(val) {
        localStorage.setItem(this.cacheKey, val)
      }
    }
  },
  created() {
    // 获取缓存
    let active = localStorage.getItem(this.cacheKey)

    if (!active) {
      // 阅卷管理员
      if (checkPermission(['exam:review:paper:list'])) {
        active = 'admin'
      } else {
        active = 'require'
      }
    } else {
      if (!checkPermission(['exam:review:paper:list'])) {
        active = 'require'
      }
      if (!checkPermission(['exam:review:match']) && checkPermission(['exam:review:paper:list'])) {
        active = 'admin'
      }
    }

    this.activeName = active
  },

  methods: {
    checkPermission,

    toMatchList(id) {
      this.$router.push({ name: 'ReviewMatch', query: { examId: id }})
    },

    toOverviewList(id) {
      this.$router.push({ name: 'ReviewPaperList', query: { examId: id }})
    }
  }
}
</script>
